<template>
	<view class="content">
		<!-- 		<u-navbar :title="title" :is-back="false" :border-bottom="false" :background="background" title-color="#fff"
			v-if="option"></u-navbar> -->
		<!-- 		<view class="top">
			<image class="banner" :src="banner" mode="widthFix"></image>
		</view> -->
		<!-- <u-tabs :list="blindBoxList" name="blindBoxName" :is-scroll="false" :current="blindBoxCurrent" @change="blindBoxChange"></u-tabs> -->
		<!-- <u-tabs-swiper ref="tabs" :list="blindBoxList" :is-scroll="false"></u-tabs-swiper> -->

		<!-- 		<view>
			<u-tabs-swiper ref="uTabs" name="blindBoxName" :list="blindBoxList" :current="blindBoxCurrent"
				@change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>

		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in blindBoxList" :key="index">
				<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
					<BlindBoxItem class="blind-box-item" :ref="'page' + index" :nid="item.id">

					</BlindBoxItem>
				</scroll-view>
			</swiper-item>
		</swiper> -->
		<view class="content-div">
			<view>
				<u-tabs-swiper ref="uTabs" :list="blindBoxList" name="blindName" :current="current" @change="tabsChange"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper :current="swiperCurrent" @transition="transition" style="height:800rpx;"
				@animationfinish="animationfinish">
				<!-- <swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%; width: 100%;">
						<view class="swiper-div">
							<view class="inContent">
								<view class="inBox">
									<view class="inBoxContent">
										<u-image width="200rpx" height="200rpx" :src="img1" border-radius="20rpx">
										</u-image>
										<text class="buttomBoxText">爆款盲盒</text>

									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item> -->
				<swiper-item class="swiper-item" v-for="(item, index) in blindBoxList" :key="index">
					<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">

						<view class="swiper-div">
							<view class="inContent">
								<view class="inBox">
									<view class="inBoxContent">
										<u-image width="200rpx" height="200rpx" :src="item.blindImg"
											border-radius="20rpx">
										</u-image>
										<text class="buttomBoxText">{{item.blindName}}</text>
										<text class="buttomBoxText">￥{{formatPrice(item.blindPrice)}}</text>

									</view>
								</view>
							</view>
						</view>

					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view class="button-view">
			<button class="inButton" @click="drawGift1">抽1次</button>
			<button class="inButton" @click="drawGift5">抽5次</button>
			<button class="inButton" @click="drawGift10">抽10次</button>
		</view>
	</view>

</template>

<script>
	import BlindBoxItem from '@/pages/blindbox/blind-box-item/blind-box-item.vue';

	export default {
		data() {
			return {
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				blindBoxList: [],
				img1: 'https://cdn.uviewui.com/uview/example/fade.jpg',
				blindBoxCurrent: 0,
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				blindBoxId: 1,
				blindBoxName: 'name',
				page: 1,

			};
		},
		onLoad() {
			this.getBlindBoxList();
		},
		onReady() {},
		methods: {
			getBlindBoxList() {
				this.$u.get('blind-box/blind-box-list').then(res => {
					this.blindBoxList = res
					this.blindBoxId = this.blindBoxList[0].id
					this.blindBoxName = this.blindBoxList[0].blindBoxName
				}).catch((err) => {
					Toast(err)
				})
			},
			drawGift1() {
				this.$u.post('user/order/blind-box-order?blindBoxId=' + this.blindBoxId + '&times=1').then(res => {
					const order = res
					this.toPayment(order)
				}).catch((err) => {
					Toast(err)
				})
			},
			drawGift5() {
				this.$u.post('user/order/blind-box-order?blindBoxId=' + this.blindBoxId + '&times=5').then(res => {
					const order = res
					this.toPayment(order)
				}).catch((err) => {
					Toast(err)
				})
			},
			drawGift10() {
				this.$u.post('user/order/blind-box-order?blindBoxId=' + this.blindBoxId + '&times=10').then(res => {
					const order = res
					this.toPayment(order)
				}).catch((err) => {
					Toast(err)
				})
			},
			toPayment(order) {
				this.$u.route({
					url: '/pages/order/payment/payment',
					params: {
						orderSn: order.orderSn,
						totalPrice: order.totalPrice,
						orderType: 'blind_box'
					}
				})
			},
			blindBoxChange(index) {
				this.blindBoxCurrent = index;
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				this.blindBoxId = this.blindBoxList[index].id
				this.blindBoxName = this.blindBoxList[index].blindBoxName
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {

				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				this.blindBoxId = this.blindBoxList[current].id
				this.blindBoxName = this.blindBoxList[current].blindBoxName
			},
			formatPrice(price) {
				return (price / 100).toFixed(2)
			},
		}
	};
</script>

<style lang="scss">
	// @import '../../static/iconfont/iconfont.css';
	.content {
		width: 100%;
		height: 100%;
	}

	.content-div {
		width: 100%;
		height: 100%;
	}

	.swiper-div {
		display: flex;
		width: 100%;
		margin-bottom: 5rpx;
	}



	.inContent {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		height: 500rpx;
		width: 100%;
		margin-top: 200rpx;
		// background-color: #ce75ad;

		.inBox {
			margin-left: 27%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			// float: left;
			width: 46%;
			height: 100%;
			border-radius: 20rpx;
			background-color: #6791f3;

			.inBoxContent {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				width: 300rpx;
				height: 400rpx;

				.inBoxView {
					border-radius: 10rpx;
					width: 200rpx;
					height: 200rpx;
					background-color: #fdfff5;
				}


			}
		}


	}



	.inButton {
		width: 200rpx;
		height: 50rpx;
		background-color: #1a1a1a;
		line-height: 50rpx;
		font-size: 30rpx;
		text-align: center;
		color: #ffffff;
		font-weight: bold;
	}

	.buttomBoxText {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #ffffff;
	}

	.button-view {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		width: 100%;
		margin-top: 80rpx;
		padding: 30rpx;
		// background-color: #FCBD71;
	}

	.inBoxText {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #8f9cbc;
	}


	.wrap {
		padding: 24rpx;
	}

	.close-btn {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
